<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>播放页</title>
    <link rel="stylesheet" href="css/play.css">
    <script type="text/javascript" src="../static/js/style.js"></script>
</head>

<body>
    <div class="b-container">
        <section id="cover"></section>
        <section class="b-top-bar">
            <i id="menu_open" class="fa-solid fa-ellipsis-vertical"></i>
            <h2>播放中</h2>
            <a href="./playlist.html">
                <i class="fa-solid fa-list"></i>
            </a>
            <div id="menu_list" class="menu-left">
                <div class="user">
                    <div class="close-icon">
                        <i class="fa-solid fa-close"></i>
                    </div>
                    <div class="img">
                        <img src="../static/img/user_avater.png">
                    </div>
                    <h2 class="name">Benbinbin</h2>
                </div>
                <ul class="menu_list">
                    <a href="./subscription.html">
                        <li>
                            <i class="fa-solid fa-cart-shopping"></i>
                            <span class="txt">订阅</span>
                        </li>
                    </a>
                    <a href="./explore.html">
                        <li>
                            <i class="fa-brands fa-wpexplorer"></i>
                            <span class="txt">探索</span>
                        </li>
                    </a>
                    <a href="./records.html">
                        <li>
                            <i class="fa-regular fa-rectangle-list"></i>
                            <span class="txt">记录</span>
                        </li>
                    </a>
                    <a href="./user.html">
                        <li>
                            <i class="fa-solid fa-gear"></i>
                            <span class="txt">设置</span>
                        </li>
                    </a>
                </ul>
            </div>
        </section>
        <section class="cover-img-txt">
            <div class="img">
                <img id="bookcover" >
            </div>
            <div class="content">
                <h2 id="bookname">Comp Engine</h2>
                <p id="author">Data Skeptic</p>
            </div>
        </section>
        <section class="b-player">
            <div class="option b-left">
                <i class="fa-solid fa-rotate-left"></i>
            </div>
            <div class="b-progess">
                <div class="b-progess-cache"></div>
                <div style="width: 60%;" class="b-progess-sloid"></div>
            </div>
            <div class="option b-right">
                <i class="fa-solid fa-rotate-right"></i>
            </div>
        </section>
        <section class="b-play-icon">
            <i class="me-play-moon"></i>
            <i class="me-play-star"></i>
            <i class="me-play-dashboard"></i>
            <i class="me-play-box"></i>
            <i class="me-play-ellipsis"></i>
        </section>
        <section class="b-play-list" style="--translateXPercent: 1">
            <div class="box">
                <p class="line" style="--height: 6"></p>
                <div class="content">
                    <h2>内容提要</h2>
                    <p>一代神王重生于神奇的法蓝世界，他惊讶的发现，
                        这里的一切都是如此的奇妙，他更是运气绝佳的找到了妻子的转世身。
                        可是，她没有前世的记忆，再次相遇已是路人。
                        一代神王重生在这对人类并不友好的世界中，能否重新追回妻子。
                        千奇百怪的妖神变又会带给他怎样的重生之路？
                        尽在一代神王至情追妻之旅，斗罗大陆第五部，重生唐三！
                        作者：唐家三少所写的《斗罗大陆5重生唐三》无弹窗免费全文阅读为转载作品,
                        章节由网友发布。
                    </p>
                </div>
            </div>
            <div class="box now">
                <p class="line" style="--height: 5"></p>
                <div class="content">
                    <h2>章节</h2>
                    <ul>
                        <li>
                            <span class="tag">9:12</span>
                            <span class="txt">
                                <span class="mark">WWDC 21</span>
                                的主发布会上的公布了 Safari 的新版设计
                            </span>
                        </li>
                        <li>
                            <span class="tag">19:12</span>
                            <span class="txt">
                                <span class="mark">WWDC 21</span>
                                的主发布会上的公布了 Safari 的新版设计
                            </span>
                        </li>
                        <li>
                            <span class="tag">20:12</span>
                            <span class="txt">
                                <span class="mark">WWDC 21</span>
                                的主发布会上的公布了 Safari 的新版设计
                            </span>
                        </li>
                        <li>
                            <span class="tag">21:12</span>
                            <span class="txt">
                                <span class="mark">WWDC 21</span>
                                的主发布会上的公布了 Safari 的新版设计
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="box next">
                <p class="line" style="--height: 5"></p>
                <div class="content">
                    <h2>笔记</h2>
                    <ul>
                        <li>
                            <div class="tag"></div>
                            <span>9:00</span>
                        </li>
                        <li>
                            <div class="tag"></div>
                            <span>10:00</span>
                        </li>
                        <li>
                            <div class="tag"></div>
                            <span>11:00</span>
                        </li>
                        <li>
                            <div class="tag"></div>
                            <span>12:00</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <section class="b-player-play">
            <div class="play-view">
                <span class="prefix">Hidden Brain - </span>
                <span class="suffix">You 2.0: Did That Re</span>
            </div>
            <div id="me_progess_line" class="me-progess active" style="--height: 2">
                <div class="b-progess-cache"></div>
                <div style="width: 50%;" class="b-progess-sloid"></div>
            </div>
            <div class="player-view">
                <div class="img-cover">
                    <img src="../static/img/play-cover-bottom.png">
                </div>
                <div class="middle-option">
                    <i class="fa-solid fa-rotate-left"></i>
                    <div class="play">
                        <i class="fa-solid fa-play"></i>
                    </div>
                    <i class="fa-solid fa-rotate-right"></i>
                </div>
                <div class="right-search">
                </div>
            </div>
        </section>
    </div>

    <script src="../static/js/play-swiper.js"></script>
    <script src="../static/js/player.js"></script>
    <script src="../static/js/main-menu.js"></script>
    <script src="../static/js/handleplay.js"></script>
</body>

</html>